<template>
  <div class="w-full h-full flex flex-col">
    <div class="flex flex-row items-center">
      <el-input
        class="w-w200"
        placeholder="请输入咨询师姓名"
        clearable
        prefix-icon="el-icon-search"
        v-model="s_export.m_export.name"
        @clear="action_list_export"
      >
      </el-input>
      <el-button
        type="primary"
        class="bg-cmain_hover ml-w10"
        @click="action_list_export"
        >搜索</el-button
      >
    </div>
    <div class="w-full h-full mt-w20">
      <el-table
        :data="s_export.list_export"
        stripe
        style="width: 100%"
        height="690"
      >
        <el-table-column type="index" label="序号" min-width="10%">
        </el-table-column>
        <el-table-column prop="heard_url" label="咨询师照片" min-width="10%">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.heard_url"
              lazy
              :preview-src-list="[scope.row.heard_url]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="咨询师姓名" min-width="10%">
        </el-table-column>
        <el-table-column label="状态" min-width="10%">
          <template slot-scope="scope">
            <div
              class="text-f15"
              :class="
                action_status_text(scope.row.status, scope.row.frozen).color
              "
            >
              {{ action_status_text(scope.row.status, scope.row.frozen).text }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" min-width="5%">
          <div class="item flex flex-row items-center" slot-scope="scope">
            <div v-if="scope.row.top !== 0">【置顶】</div>
            <div v-else>{{ "【" + scope.row.sort + "】" }}</div>
            <div v-if="scope.row.top === 0" style="display: flex">
              <img
                  class="w-w20 h-w20 cursor-pointer"
                  src="@/assets/image/icon_data_down_normal.png"
                  alt="下移"
                  srcset=""
                  @click="action_move_down(scope.row)"
              />
              <img
                  class="w-w20 h-w20 cursor-pointer"
                  src="@/assets/image/icon_data_up_normal.png"
                  alt="上移"
                  srcset=""
                  @click="action_move_up(scope.row)"
              />
            </div>
          </div>
        </el-table-column>
        <el-table-column label="操作" min-width="20%">
          <template slot-scope="scope">
            <el-button size="mini" @click="action_move_top(scope.row)" v-if="scope.row.top === 0">
              置顶</el-button>
            <el-button size="mini" @click="action_cancel_top(scope.row)" v-else>
              取消置顶</el-button>
            <el-button
              class="bg-cmain"
              size="mini"
              type="primary"
              @click="action_info(scope.row.id)"
              >详情
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="action_frozen(scope.row.id)"
              style="background-color: #f56c6c"
              v-if="scope.row.frozen == 1"
              >冻结</el-button>
            <el-button
                v-else
                size="mini"
                type="success"
                @click="action_frozen(scope.row.id)"
                style="background-color: #67c23a"
            >解冻</el-button>
            <el-popconfirm
              class="ml-w10"
              title="确定删除该咨询师吗？"
              @confirm="action_del(scope.row.id)"
              confirm-button-type="text"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                style="background-color: #f56c6c"
              >
                删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="w-full flex items-end justify-center" style="height: 7%">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="s_export.m_page.total"
          :page-size="s_export.m_page.limit"
          @current-change="action_page_change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>
</style>
